@extends('layouts.appManager')
@section('title')
    服务器列表
@endsection

@section('script')
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                search:{
                    all:0,
                    ip:'',
                    page:1,
                    size:10
                },
                exchangeTimeId:0,
                serverList:[],
                serverList_total:0,
                curServer:null,
                dialogRenew:false,
                renew_m:1, //续费月数
                renew_m_s:300,   //每月积分数
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log(this.a)
            },
            mounted() {
                this.getServers();
            },
            methods: {
                getServers:function(){
                    let t=this;
                    post("server/list",t.search,res=>{
                        t.serverList=res.data.data
                        t.serverList_total=res.data.total
                    },t);
                },
                getServerEnableTxt(server){
                    if (server.enable)
                        return "剩余: "+server.enableDays +" 天";
                    else
                        return "过期: "+-server.enableDays +" 天";
                },
                showDialogRenew(item){
                    this.curServer=item
                    this.dialogRenew=true
                },
                renewServer(){
                    let t=this;
                    post("server/renew",{
                        id:t.curServer.id,
                        m:t.renew_m
                    },res=>{
                        alert('升级成功');
                        location.reload();
                    },t);
                },
                exchangeTime(id){
                    let t=this;
                    post("server/exchangeTime",{
                        id1:t.exchangeTimeId,
                        id2:id
                    },res=>{
                        t.getServers();
                        t.exchangeTimeId=0;
                    },t);
                },
                handleCurrentChange(page){
                    this.search.page=page;
                    this.getServers();
                }
            }
        })
    </script>
@endsection

@section('content')

    <el-dialog v-if="curServer"
               :title="'服务续费：'+curServer.name"
        :visible.sync="dialogRenew"
        width="50%">
        <div style="text-align: end;">
            <el-button-group>
                <el-button :type="renew_m>=1?'primary':'default'" @click="renew_m=1">1月</el-button>
                <el-button :type="renew_m>=2?'primary':'default'" @click="renew_m=2">2月</el-button>
                <el-button :type="renew_m>=3?'primary':'default'" @click="renew_m=3">3月</el-button>
                <el-button :type="renew_m>=4?'primary':'default'" @click="renew_m=4">4月</el-button>
                <el-button :type="renew_m>=5?'primary':'default'" @click="renew_m=5">5月</el-button>
                <el-button :type="renew_m>=6?'primary':'default'" @click="renew_m=6">6月</el-button>
                <el-button :type="renew_m>=7?'primary':'default'" @click="renew_m=7">7月</el-button>
                <el-button :type="renew_m>=8?'primary':'default'" @click="renew_m=8">8月</el-button>
                <el-button :type="renew_m>=9?'primary':'default'" @click="renew_m=9">9月</el-button>
                <el-button :type="renew_m>=10?'primary':'default'" @click="renew_m=10">1年</el-button>
            </el-button-group>
            <br><br>
            <h3>
                消耗：@{{ renew_m * renew_m_s }}积分
            </h3>
            <h5>
                = @{{ renew_m * renew_m_s / 10 }}元
            </h5>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogRenew = false">取 消</el-button>
    <el-button type="primary" @click="renewServer">确 定</el-button>
  </span>
    </el-dialog>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card panel mb-4">
                    <div class="card-header">服务器信息</div>
                    @if(Auth::user()->is_admin == 1)
                        <br>
                        <div>
                            <el-button :type="search.all==0?'success':''" size="mini" @click="search.page=1;search.all=0;getServers()">我的</el-button>
                            <el-button :type="search.all==1?'success':''" size="mini" @click="search.page=1;search.all=1;getServers()">全部</el-button>
                            <el-button :type="search.all==2?'success':''" size="mini" @click="search.page=1;search.all=2;getServers()">有效</el-button>

                            <br><br>
                            <div style="width: 200px">
                                <el-input placeholder="请输入内容" v-model="search.ip" class="input-with-select" size="mini">

                                    <el-button size="mini" @click="search.page=1;search.all=1;getServers()" slot="append" icon="el-icon-search">
                                    </el-button>
                                </el-input>
                            </div>
                        </div>
                    @endif

                    <el-alert
                        title=" 警告1：请用全新的服务器安装。  警告2：请不要将服务器类型和版本随意切换，除非你知道如何设置。 "
                        type="error" show-icon>
                    </el-alert>
                    <el-alert
                        title=" 提示：如需更换服务端，建议先给服务器重装系统，然后在此页面删除之前对接的服务器，再重新添加，时间可以点击绿色按钮进行转移"
                        type="warning" show-icon>
                    </el-alert>

                    <div class="card-body ">
                        <div class=" table-responsive">
                        <el-table
                            :data="serverList"
                            style="width: 100%">
                            <el-table-column
                                prop="id"
                                label="id"
                                width="70">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="120">
                                <template slot-scope="scope">
                                    <el-link :type="scope.row.type===1?'primary':'danger'" :href="'http://'+ scope.row.domain +'.{{config('conf.domain')}}'" target="_blank">@{{scope.row.name}}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="domain"
                                label="域名/IP"
                                width="160">
                                <template slot-scope="scope">
                                    @{{scope.row.domain}} <br>
                                    @{{scope.row.server_host}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="endTime" width="300"
                                label="交换时间 / 到期时间">
                                <template slot-scope="scope">
                                    <el-button v-if="exchangeTimeId>0 && exchangeTimeId===scope.row.id" type="danger" size="mini" circle icon="el-icon-refresh" @click="exchangeTimeId=0"></el-button>
                                    <el-button v-else-if="exchangeTimeId>0" type="primary" size="mini" circle icon="el-icon-refresh" @click="exchangeTime(scope.row.id)"></el-button>
                                    <el-button v-else-if="exchangeTimeId===0 && scope.row.enableDays>=5" type="success" size="mini" circle icon="el-icon-refresh"  @click="exchangeTimeId=scope.row.id"></el-button>
                                    <el-button v-else-if="exchangeTimeId===0" type="info" size="mini" circle icon="el-icon-refresh" disabled></el-button>
                                    <el-button @click="showDialogRenew(scope.row)" :type="scope.row.enable?( scope.row.enableDays<7?'warning':'primary'):'danger' " plain size="mini">@{{ scope.row.endTime }} | @{{ getServerEnableTxt(scope.row) }}</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.enable">
                                        <template v-if="scope.row.type===2">
                                            <a class="badge badge-primary" target="_blank" title="管理" :href="'server_v2/'+scope.row.id+'/'">Linux服务端安装向导</a>
                                        </template>

                                        <br>
                                        <a class="badge badge-info" target="_blank" title="对接检查" :href="'server/'+scope.row.id+'/status'">对接检查</a>
                                        <a class="badge badge-info" target="_blank" title="状态" :href="'server/'+scope.row.id">状态</a>
                                        <a class="badge badge-primary" target="_blank" title="服务器配置" :href="'server/'+scope.row.id+'/edit'">编辑</a>
                                        <a class="badge badge-danger" target="_blank" title="配置文件" :href="'modConf/'+scope.row.id">模块配置(新)</a>
                                        <br>
                                        <a class="badge badge-primary" target="_blank" title="游戏参数" :href="'server/'+scope.row.id+'/config'">玩家网站</a>
                                        <a class="badge badge-primary" target="_blank" title="道具商城" :href="'server/'+scope.row.id+'/mall'">道具商城</a>
                                        <a class="badge badge-primary" target="_blank" title="lua脚本" :href="'server/'+scope.row.id+'/lua'">lua脚本</a>
                                        <a class="badge badge-primary" target="_blank" title="内容编辑" :href="'gameEditor/'+scope.row.id+'/index'">内容管理</a>

                                        <a class="badge badge-primary" target="_blank" title="GM命令" :href="'server/'+scope.row.id+'/gm'">GM命令</a>

                                        <a class="badge badge-danger" target="_blank" title="技能商城" :href="'server/mallspell/'+scope.row.id">技能商城(新)</a>
                                        <a class="badge badge-danger" target="_blank" title="API接口" :href="'server/api/'+scope.row.id">API接口(新)</a>
                                        <a class="badge badge-danger" target="_blank" title="API接口" :href="'server/cooperation/'+scope.row.id">合作授权(新)</a>
                                    </div>
                                    <div v-else>
                                        已过期
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column width="130">
                                <template slot-scope="scope">
                                    <el-button type="warning" size="mini" @click="showDialogRenew(scope.row)">续费</el-button>
                                    <form method="POST" style="display: inline-block;margin-left: 15px" :action="'server/'+scope.row.id">
                                        @csrf
                                        {{ method_field('DELETE') }}
                                        <el-button native-type="submit" type="danger" size="mini" plain round icon="el-icon-delete" circle></el-button>
                                    </form>
                                </template>
                            </el-table-column>
                        </el-table>
                        </div>

                        <div style="text-align: center; margin-top: 15px">
                            <el-pagination background
                                           @current-change="handleCurrentChange"
                                           layout="prev, pager, next"
                                           :total="serverList_total">
                            </el-pagination>
                        </div>

                        <br><br>

                        @if (Auth::user()->is_admin == 1 or sizeof($servers) < config('conf.serversCount'))
                            <div class="text-right">
                                <a href="{{route('server.choose')}}" class="btn btn-primary">
                                    添加服务器
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                {{--<div class="card mb-4">
                    <div class="card-header">配置服务器信息</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        You are logged in!
                    </div>
                </div>--}}
            </div>
        </div>
    </div>
@endsection
